<!--
  @Name: index.vue
  @Description: 渠道产品信息
  @Author: huangcy@zlsoft.cn
  @CreateDate: 2023/6/27
 -->
<template>
  <div class="app-container">
    <el-dialog
      title='导入渠道产品销量'
      :visible.sync="importGoodsStatus"
      width="400px"
    >
      <el-upload
        ref="upload_import"
        action="/api/jstChannelGoods/import"
        :data={channelId:channelId}
        :auto-upload="false"
        :before-upload="beforeUpload"
        :headers="upload.headers"
        :limit="1"
        :on-error="handleError"
        :on-success="handleSuccess"
        accept=".xlsx, .xls"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div class="tpl">
        <el-button
          size="small"
          type="info"
          @click="downloadTemplate('渠道产品销量.xlsx')"
        >下载模板
        </el-button>
        <span class="tips">提示：仅允许导入.xls或.xlsx格式文件</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="importStatus=false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission">
        <el-button
          slot="left"
          class="filter-item"
          size="mini"
          type="danger"
          icon="el-icon-remove-outline"
          :loading="crud.disableLoading"
          @click="crud.enableOrDisable('DISABLE')"
          :disabled="crud.selections.length < 1"
          v-permission="permission.disable"
        >
          禁用
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-circle-check"
          :loading="crud.enableLoading"
          :disabled="crud.selections.length < 1"
          @click="crud.enableOrDisable('ENABLE')"
          v-permission="permission.enable"
        >
          启用
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="handleSaleQuery"
          v-permission="permission.enable"
        >
          查看销量
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-s-operation"
          @click="importGoodsStatus = true"
          v-permission="permission.import">导入销量</el-button>
      </crudOperation>
      <el-form v-if="!crud.props.searchToggle" size="small" class="channel-form" label-width="90px" :model="query">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="产品信息">
              <table-select
                :tableColumns=" [
                    {prop:'code',label:'商品编码',width:'100'},
                  {prop:'name',label:'商品名称',width: '280'}
                  ]"
                labelKey="name"
                valueKey="id"
                :value.sync="query.goodsIds"
                placeholder="请选择产品"
                url="/api/dropDown/jstGoodsList"
                style="width:100%;display: inline-block"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="产品名称">
              <el-input v-model="query.goodsName" placeholder="请输入产品名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="内部编码">
              <el-input placeholder="请输入内部编码" v-model="query.goodsSkuId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="商家编码">
              <el-input placeholder="请输入商家编码" v-model="query.goodsIId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="产品类型">
              <el-select v-model="query.goodsType" style="width: 100%" clearable placeholder="请选择产品类型">
                <el-option v-for="val in dict.t_jst_goods_type" :key="val.value" :label="val.label"
                           :value="val.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="产品等级">
              <el-select v-model="query.goodsLevel" style="width: 100%" clearable placeholder="请选择产品等级">
                <el-option v-for="val in dict.t_jst_goods_level" :key="val.value" :label="val.label" :value="val.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="渠道产品等级">
              <el-input placeholder="请输入渠道产品等级" v-model="query.level"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="供应商">
              <el-input v-model="query.supplierName" placeholder="请输入供应商"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="预上新日期">
              <el-date-picker
                v-model="query.preGroundNewTime"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="上新日期">
              <el-date-picker
                v-model="query.groundNewTime"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="拍照日期">
              <el-date-picker
                v-model="query.photoTime"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="备注">
              <el-input
                v-model="query.remark"
                style="width: 320px"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <rrOperation :crud="crud"/>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--表格渲染-->
    <right-click-menu @tableConfig="tableConfig" :options.sync="rightClickMenuConfig"></right-click-menu>
    <el-dialog title="表格配置"
               :visible.sync="tableConfigShow"
               width="60%">
      <j-table-column-config :columns.sync="currentHeader"  @tabSave="saveHead"/>
    </el-dialog>
    <el-table ref="table"
              stripe
              border
              v-loading="crud.loading"
              :data="crud.data"
              size="small"
              style="width: 100%;"
              @sort-change="sortTab"
              @selection-change="crud.selectionChangeHandler"
              @row-click="changeChannelPrice"
              @row-dblclick="productDetail"
              @header-dragend="changeColWidth"
              v-draghead="manyTableOption"
              :cell-style="{'text-align':'center'}" >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="55" label="序号"/>
      <el-table-column
        v-if="item.visible"
        v-for="(item, index) in header"
        :key="`col_${index}`"
        :prop="item.prop"
        :label="columnLabel(item)"
        :width="item.width + 'px'"
        :data-porp='item.prop'
        @contextmenu.native="showMenu"
        @header-dragend="changeColWidth"
        :fixed="item.fixed"
        :sortable="item.sortable?'custom':false"
        :sort-orders="['descending', 'ascending', null]"
        sort-change="sort"
      >
        <!-- 自定义渲染模版 -->
        <template slot-scope="scope">
          <!-- 当列key为 sort 时，渲染一个手柄icon -->
          <template >
            <span v-if="item.type == 1" style="margin-left: 0px">
              <span v-if="item.prop == 'groundNewTime' || item.prop == 'preGroundNewTime' || item.prop == 'photoTime'">
                    {{ parseDate(scope.row[`${item.prop}`])}}
              </span>
              <span v-else>
                    {{scope.row[`${item.prop}`]}}
              </span>
            </span>
            <span v-else-if="item.type == 2" style="margin-left: 0px">
              {{ parseTime(scope.row[`${item.prop}`])}}
            </span>
            <span v-else-if="item.type == 3" style="margin-left: 0px">
                <span :class="{'red':(scope.row[`type`] === 3)}">
                  {{ getDict(`this.dict.label.${item.dictionary}["${scope.row[item.prop]}"]`) }}
                </span>
              </span>
            <span v-else-if="item.type == 4" style="margin-left: 10px">
              <span v-if="item.prop == 'goodsImageUrl'">
                    <span v-if="scope.row.goodsImageUrl">
                      <el-image v-for="(item,i) in JSON.parse(scope.row.goodsImageUrl)" :key="i" class="imgs" :src="item" :preview-src-list="JSON.parse(scope.row.goodsImageUrl)"/>
                    </span>
                    <span v-else>无</span>
              </span>
              <span v-else-if="item.prop == 'link'">
                    <span v-if="scope.row.link">
                      <router-link to="" @click.native ="jumpTo(scope.row.link)" class="link-type">
                        <span>{{ scope.row.link }}</span>
                      </router-link>
                    </span>
                    <span v-else>无</span>
               </span>
            </span>
          </template>
        </template>
      </el-table-column>
      <el-table-column v-permission="['admin','jstGoods:del']" label="操作" width="80px" align="center">
        <template #default="{row}">
          <el-button
            size="mini"
            type="text"
            @click="handleDel(row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    &lt;!&ndash;表格渲染&ndash;&gt;-->
<!--    <el-table-->
<!--      ref="table"-->
<!--      v-loading="crud.loading"-->
<!--      stripe-->
<!--      border-->
<!--      :data="tableData"-->
<!--      size="small"-->
<!--      :height="tableHeight"-->
<!--      fit-->
<!--      @selection-change="crud.selectionChangeHandler"-->
<!--      @row-click="changeChannelPrice"-->
<!--      @row-dblclick="productDetail"-->
<!--    >-->
<!--      <el-table-column type="selection" width="55" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('channelName')" prop="goodsLevel" label="渠道名称" min-width="90"-->
<!--                       align="center"/>-->
<!--      <el-table-column v-if="columns.visible('iId')" prop="iId" label="商家编码" min-width="90"-->
<!--                       align="center"/>-->
<!--      <el-table-column v-if="columns.visible('goodsCode')" prop="goodsCode" label="产品编码" min-width="90"-->
<!--                       align="center"/>-->
<!--      <el-table-column v-if="columns.visible('goodsName')" prop="goodsName" label="产品名称" min-width="90"-->
<!--                       align="center"/>-->
<!--      <el-table-column v-if="columns.visible('goodsLevel')" prop="goodsLevel" label="产品等级" min-width="90"-->
<!--                       align="center"/>-->
<!--      <el-table-column v-if="columns.visible('link')" prop="link" label="渠道产品链接" min-width="90"-->
<!--                       show-overflow-tooltip>-->
<!--        <template #default="{row}">-->
<!--          <router-link to="" @click.native ="jumpTo(row.link)" class="link-type">-->
<!--            <span>{{ row.link }}</span>-->
<!--          </router-link>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column v-if="columns.visible('mainColor')" prop="mainColor" label="产品主色" min-width="90" align="center"-->
<!--                       show-overflow-tooltip/>-->
<!--      <el-table-column v-if="columns.visible('goodsImageUrl')" prop="goodsImageUrl" label="产品图片" width="140">-->
<!--        <template #default="{row}">-->
<!--          <el-image-->
<!--            v-if="JSON.parse(row.goodsImageUrl)"-->
<!--            :src="JSON.parse(row.goodsImageUrl)[0]"-->
<!--            :preview-src-list="JSON.parse(row.goodsImageUrl)"-->
<!--            style="width: 100%;height: 64px"-->
<!--            fit="contain"-->
<!--          />-->
<!--          <div v-else style="width: 100%;height: 64px"></div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column v-if="columns.visible('goodsType')" prop="goodsType" label="产品类型" min-width="80" align="center">-->
<!--        <template #default="{row}">-->
<!--          {{ dict.label.t_jst_goods_type[row.goodsType] }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column v-if="columns.visible('photoTime')" prop="photoTime" label="渠道拍照日期"-->
<!--                       min-width="120" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('groundNewTime')" prop="groundNewTime" label="渠道上新日期"-->
<!--                       min-width="120" align="center"/>-->
<!--      <el-table-column-->
<!--        v-for="index in 3"-->
<!--        :key=index-->
<!--        v-show="columns.visible('channelPrice' + index)"-->
<!--        :prop="'channelPrice' + index"-->
<!--        :label="'渠道价格'+ index"-->
<!--        min-width="100"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--      >-->
<!--        <template #default="{row}">-->
<!--          <el-input-->
<!--            v-if="row.isEdit"-->
<!--            v-model="row['channelPrice' + index]"-->
<!--            :class="'channelPriceInput'+index"-->
<!--            autofocus-->
<!--            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"-->
<!--            @input="uploadPrice(row, index)"-->
<!--          />-->
<!--          <div v-else>-->
<!--            {{ row['channelPrice' + index] }}-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column v-if="columns.visible('channelRemark')" prop="channelRemark" label="渠道备注" min-width="90" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('goodsRemark')" prop="goodsRemark" label="产品备注" min-width="90" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('remark')" prop="remark" label="渠道产品备注" min-width="90" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('buyerShowPlan')" prop="buyerShowPlan" label="买家秀计划"-->
<!--                       min-width="110"/>-->
<!--      <el-table-column v-if="columns.visible('buyerShowComplete')" prop="buyerShowComplete" label="买家秀完成"-->
<!--                       min-width="110"/>-->
<!--      <el-table-column v-if="columns.visible('oldCustomerPlan')" prop="oldCustomerPlan" label="老客户计划"-->
<!--                       min-width="110"/>-->
<!--      <el-table-column v-if="columns.visible('oldCustomerComplete')" prop="oldCustomerComplete" label="老客户完成"-->
<!--                       min-width="110"/>-->
<!--      <el-table-column v-if="columns.visible('usableQty')" prop="usableQty" label="在库库存" min-width="90" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('purchaseQty')" prop="purchaseQty" label="采购在途" min-width="90" align="center"/>-->
<!--      <el-table-column v-if="columns.visible('totalQty')" prop="totalQty" label="总库存" min-width="90" align="center"/>-->
<!--      <el-table-column-->
<!--        v-for="(n,index) in 7"-->
<!--        :key="'sale' + index"-->
<!--        :prop="'sale' + index"-->
<!--        :label="`${index===0?`当`:index}天前销量`"-->
<!--        min-width="110"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--      />-->
<!--      <el-table-column v-if="columns.visible('totalSale')" prop="totalSale" label="总销量" min-width="90" align="center"/>-->
<!--      <el-table-column v-permission="['admin','jstGoods:del']" label="操作" width="80px" align="center">-->
<!--        <template #default="{row}">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            @click="handleDel(row)"-->
<!--          >删除-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
    <!--分页组件-->
    <pagination/>
    <!--表单组件-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      destroy-on-close
      top="5vh"
      width="80vw"
    >
      <sale-query v-if="dialogTitle === '销售详情'" :arr="['productEcharts','supplierEcharts']"/>
      <channel-detail v-if="dialogTitle==='渠道详情'" :row="dblRow" style="height:80vh" @success="handleUpload"/>
    </el-dialog>
  </div>
</template>

<script>
import crudJstChannelGoods from '@/api/erp/jstChannelGoods'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import jPrintConfig from '@/components/jPrintConfig/jPrintConfig'
import saleQuery from './saleQuery.vue'
import channelDetail from './channelDetail.vue'
import{manyTableMixin}from"../../../mixins/manyTableMixin";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
import { getToken } from "@/utils/auth";
import request from '../../../utils/request'

// crud交由presenter持有
const defaultCrud = CRUD({
    title: '渠道产品销量',
    url: 'api/jstChannelGoods',
    sort: 'id,desc',
    optShow: {
      add: false,
      edit: false,
      del: false,
      download: false,
      print: false, // 打印
      printDetail: false, // 打印详情
      upload: false,
      leadingIn: false,
      search: true
    },
    crudMethod: { ...crudJstChannelGoods }
  }
)
const defaultForm = {
  id: null,
  channelId: null,
  goodsId: null,
  mainColor: null,
  photoTime: null,
  groundNewTime: null,
  preGroundNewTime: null,
  channelPrice1: null,
  channelPrice2: null,
  channelPrice3: null,
  buyerShowPlan: null,
  buyerShowComplete: null,
  oldCustomerPlan: null,
  oldCustomerComplete: null,
  seq: null,
  status: null,
  remark: null,
  createUserId: null,
  createTime: null,
  updateUserId: null,
  updateTime: null
}
export default {
  name: 'JstChannelGoods',
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    jPrintConfig,
    saleQuery,
    channelDetail,
    jTableColumnConfig
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud(), manyTableMixin],
  dicts: ['t_jst_goods_type', 't_jst_goods_level'],
  data() {
    return {
      permission: {
        enable: ['admin', 'jstChannelGoods:enable'],
        disable: ['admin', 'jstChannelGoods:disable'],
        add: ['admin', 'jstChannelGoods:add'],
        edit: ['admin', 'jstChannelGoods:edit'],
        del: ['admin', 'jstChannelGoods:del'],
        import: ['admin', 'jstChannelGoods:import'],
        export: ['admin', 'jstChannelGoods:export'],
        copy: ['admin', 'jstChannelGoods:copy'],
        upload: ['admin', 'jstChannelGoods:upload'],
        download: ['admin', 'jstChannelGoods:download'],
      },
      rules: {
        channelId: [
          { required: true, message: '渠道id不能为空', trigger: 'blur' }
        ],
        goodsId: [
          { required: true, message: '产品id不能为空', trigger: 'blur' }
        ]
      },
      extendRightEvent: [
        {
          fnHandler: 'delDetail', // 绑定事件
          icoName: 'el-icon-delete', // icon图标
          btnName: '删除' // 菜单名称
        },
      ],
      goodsLevel: ['S', 'A', 'B', 'C', 'D'],
      dialogVisible: false,
      dialogTitle: '',
      tableHeight: '500px',
      tableData: [],
      timeout: null,
      dblRow: {},
      importGoodsStatus:false,
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: getToken() }
      },
      channelId: null
    }
  },
  watch: {
    'crud.data': {
      handler(val) {
        this.tableData = val || []
      }, immediate: true, deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      const dom = document.documentElement.clientHeight
      this.tableHeight = dom - 250 + 'px'
    })
  },
  activated() {
    //获取上次进入Id
    const id = sessionStorage.getItem(this.$options.name + 'Id')
    //记录本次进入的Id
    sessionStorage.setItem(this.$options.name + 'Id', this.$route.params.id)
    console.log(this.$options.name, '999999999999', this.$route.params);
    if (id !== this.$route.params.id) {

      this.crud.params.id = this.$route.params.id
      this.crud.refresh()
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      // 获取渠道信息
      this.crud.query.channelIds = this.$route.fullPath.split('?')[1] || ""
      this.channelId = this.$route.fullPath.split('?')[1]
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    // 查询销量
    handleSaleQuery() {
      this.dialogVisible = true
      this.dialogTitle = '销售详情'
    },
    // 编辑行
    changeChannelPrice(row) {
      this.tableData = JSON.parse(JSON.stringify(this.crud.data.map(i => {
        return {
          isEdit: row.id === i.id,
          ...i,
        }
      })))
    },
    // 更新渠道价格
    uploadPrice(row, index) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.crud.form = Object.assign({}, row, { ['channelPrice' + index]: row['channelPrice' + index] * 1 })
        this.crud.doEdit()
      }, 1000)
    },
    // 产品信息
    productDetail(row) {
      this.dblRow = row
      this.dialogVisible = true
      this.dialogTitle = '渠道详情'
    },
    // 产品信息
    handleUpload() {
      this.dialogVisible = false
      this.crud.refresh()
    },
    // 删除
    handleDel(row) {
      this.$confirm("即将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          crudJstChannelGoods.del([row.id]).then(res => {
            if (res.status === 200) {
              this.$message.success('删除成功');
              this.crud.refresh()
            } else {
              this.$message.err('删除失败');
            }
          });
        })
        .catch(() => {
          this.$message.info('已取消');
        });
    },
    //链接地址跳转新页面
    jumpTo(url) {
      if (url) {
        if(url.substr(0, 4) !== "http") {
          url = "https://" + url;
        }
        // console.log('url',url)
        window.open(url, "_blank");
      }
    },
    downloadTemplate(name) {
      request({
        url: 'api/common/downloadExcelTemplate?name=' + name,
        method: 'get',
        responseType: 'blob'
      }).then((res) => {
        const a = document.createElement('a')
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const objectUrl = URL.createObjectURL(blob)
        a.setAttribute('href', objectUrl)
        a.setAttribute('download', name)
        a.click()
      })
    },
    handleSubmit() {
      // this.crud.doImport()
      this.$refs.upload_import.submit()
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      return isLt2M
    },
    handleError(err, file, fileList) {
      this.crud.notify(
        ' -_- !~~ 服务器开小差了，稍后重试',
        CRUD.NOTIFICATION_TYPE.WARNING
      )
    },
    handleSuccess(response, file, fileList) {
      if (response !== '导入成功') {
        const a = document.createElement('a')
        a.setAttribute('href', response.data.result)
        a.click()
      } else {
        this.crud.notify(response, CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.$refs.upload.clearFiles()
        this.uploadDialgShow = false
        this.crud.refresh()
      }
    },
    parseDate(time, cFormat) {
      // console.log('time',time)
      if (arguments.length === 0) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d}'
      let date
      if (typeof time === 'undefined' || time === null || time === 'null') {
        return ''
      } else if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
        // console.log('date',date)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    }
  }
}
</script>

<style scoped lang="scss">
  .imgs{
    // width: 50px;
    height: 70px;
    margin: 0 5px;
  }
</style>
